<html>
    <head>
        <title>我永远喜欢刻晴</title>
    </head>
    <body style="color: darkorchid">
        <div class="main">
            <div class="mytodo">天青色等烟雨</div>
            <div class="row">
                <input
                    class="input"
                    type="text"
                    id="inputtext"
                    placeholder="请输入您的任务，按回车键或确认按钮以确认"
                    onkeyup="keyup(event)"
                />
                <input
                    class="confirm"
                    type="button"
                    name="bt"
                    value="确认"
                    onclick="handleClick(event)"
                />
            </div>
            <div id="todogrroup"></div>
            <div id="xx" onmouseenter="enter('xx')" onmouseleave="leave('xx')"></div>
            <div class="courge">而我在等你</div>
        </div>
    </body>
    <script lang="javascript">
        var intCnt = 0;
        function init(){
        console.log('xxx');
        document.getElementById("button2").onclick=handleClick;
        console.log('xxxxxx');
        }

        function handleClick(e){
        console.log('handleClick');
        console.log(e);
        var temp = getvalue();
        var div=document.createElement('id');
        document.getElementById("todogrroup").innerHTML += "<div class='item' id='todo"
        + intCnt + "'><input type='checkbox' name='todocheck'><div class='item-value'>"
        +temp + "</div><button class='item-del' type='button' onclick='deletByIndex("
        + intCnt + ")'>删除</button></div>";
        document.getElementById("inputtext").value = "";
        intCnt++;
        }
        function getvalue(){
        var temp = document.getElementById("inputtext");
        console.log(temp.value);
        return temp.value;
        }
        function deletByIndex(index){
        document.getElementById("todo" + index).remove();
        }
        function keyup(e){

        console.log(e);
        if(e.keyCode==13){
                handleClick();
        }
        }
         init();
    </script>
    <style>
        body {
			background: url("Genshin.jpg") no-repeat center center fixed;
			-webkit-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 85vh;
        }
        .main {
            border: 1px solid #b5c0ed;
            border-radius: 8px;
            padding: 8px;
			backdrop-filter:blur(1px);
			background-color: rgba(248, 248, 248, 0.489);
        }
        .row {
            display: flex;
        }
        .confirm {
            background-color: rgb(158, 186, 255);
            border: 1px solid #91a4f3;
            border-radius: 5px;
            color: #0838f7;
        }
        .item:hover {
            background-color: rgb(164, 219, 253);
        }
        .item {
            display: flex;
            align-items: center;
            margin: 6px;
            padding: 3px;
        }
        .item-value {
            flex-grow: 1;
            color: darkorchid;
        }
        .item:hover .item-del {
            opacity: 1;
        }
        .item-del {
            color: cornsilk;
            background-color: rgb(247, 117, 117);
            border-radius: 6px;
            border: 2px;
            opacity: 0;
        }
        .input {
			backdrop-filter:blur(2px);
            padding: 8px;
            outline: none;
            width: 500px;
            margin-right: 10px;
			background-color:rgba(255, 255, 255, 0.571);
			border: 0;
        }
        .input:focus {
            box-shadow: 0px 0px 4px 3px rgb(108, 170, 240);
        }
        .courge {
			width: 140px;
            padding: 6px 5px 2px 5px;
			margin:	0 auto;
        }
        .mytodo {
            padding: 0px 60px 5px 220px;
            font-weight: bolder;
            font-size: larger;
        }
    </style>
</html>